<template>
	<view>
		
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :circular="true">
			<swiper-item v-for="item in SwiperList" :key="item.goods_id">
				<image :src="item.image_src"></image>
			</swiper-item>
		</swiper>
		
		<!-- 导航栏 -->
		<view class="shouye_nav">
			
			<view class="shouye_nav_item" @click.stop="to_detail(1)">
				<view class="iconfont icon-gaiicon-"></view>
				<view>开心超市</view>
			</view>
			
			<view class="shouye_nav_item" @click.stop="to_detail(2)">
				<view class="iconfont icon-xinbaniconshangchuan-"></view>
				<view>联系我们</view>
			</view>
			
			<view class="shouye_nav_item" @click.stop="to_detail(3)">
				<view class="iconfont icon-image"></view>
				<view>社区图片</view>
			</view>
			
			<view class="shouye_nav_item">
				<view class="iconfont icon-shipin"></view>
				<view>学习视频</view>
			</view>
			
		</view>
		
		<!-- 推荐商品 -->
		<view class="shouye_hot_goods">
			<view class="shouye_title">推荐商品</view>
			<view class="hot_goods">
				<view class="hot_goods_item" v-for="item in GoodsList" :key="item.goods_id">
					<image :src="item.goods_small_logo" mode="aspectFit"></image>
					<view class="hot_goods_price">￥{{item.goods_price}}</view>
					<view class="hot_goods_name">{{item.goods_name}}...</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {get_Swiper,get_Goods} from '../../request/api.js' 
	export default {
		data() {
			return {
				SwiperList:[],
				GoodsList:[],
				pagenum:2,
			}
		},
		onLoad() {
		   get_Swiper(null).then(res=>{
			   this.SwiperList=res.data.message
		   })
		   get_Goods({pagenum:this.pagenum,pagesize:6}).then(res=>{
			   console.log("商品数据",res.data.message.goods)
			   this.GoodsList=res.data.message.goods;
			   this.pagenum++;
		   })
			
		},
		onReachBottom() {
			uni.showNavigationBarLoading();
			get_Goods({pagenum:this.pagenum,pagesize:6}).then(res=>{
				this.GoodsList=this.GoodsList.concat(res.data.message.goods)
				console.log("拼接后的数组",this.GoodsList)
				this.pagenum++;
				uni.hideNavigationBarLoading();
			})
		},
		methods: {
			to_detail(index){
				switch(index){
					case 1:
						uni.navigateTo({
							url:"./chaoshi/chaoshi"
						})
					   break;
					case 2:
						uni.navigateTo({
							url:"./lianxiwomen/lianxiwomen"
						})
						break;
					case 3:
						uni.navigateTo({
							url:"./shequtupian/shequtupian"
						})
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	
	swiper{height: 190px;}
	swiper-item>image{width: 100%;}
	
	.shouye_nav{display: flex;}
	.shouye_nav_item{width: 25%;}
	.shouye_nav_item>view:nth-of-type(2){text-align: center;font-size: 15px;}
	.shouye_nav_item>view:nth-of-type(1){width: 60px;height: 60px;border: solid 1px black;margin: 10px auto;border-radius: 50%;background-color: #b50e03;color: white;line-height: 60px;text-align: center;font-size: 35px;}

	.shouye_hot_goods{background-color: #eee;width: 100%;overflow: hidden;}
	.shouye_title{width: 100%;height: 50px;line-height: 50px;color: $shop-color;text-align: center;letter-spacing: 20px;background-color: #fff;text-indent: 21px;margin: 5px auto;}
	
	.hot_goods{display: flex;flex-wrap: wrap;background-color: #eee;padding: 10rpx;justify-content: space-around;}
	.hot_goods_item{width: 355rpx;background-color: white;margin-top: 8rpx;height: 428rpx;overflow: hidden;text-overflow:ellipsis;white-space: wrap;}
	.hot_goods_item>image{width: 300rpx;height: 300rpx;margin-left: 27.5rpx;}
	.hot_goods_price{color: red;margin-left: 27.5rpx;}
	.hot_goods_name{font-size: 30rpx;margin-left: 27.5rpx;}
</style>
